@import (reference) '~antd/es/style/themes/index';

@pro-header-hover-bg: rgba(0, 0, 0, 0.025);

.menu {
    :global(.anticon) {
        margin-right: 8px;
    }

    :global(.ant-dropdown-menu-item) {
        min-width: 160px;
    }
}

.right {
    display        : flex;
    justify-content: space-between;
    float          : right;
    height         : 40px;
    margin-left    : auto;
    overflow       : hidden;

    &.zkfc-header {
        width: 100%;
    }

    .tabList {
        display     : flex;
        align-items : center;
        flex        : 1;
        margin-right: 8px;
        max-width   : calc(100% - 220px);
    }

    .action {
        display    : flex;
        align-items: center;
        height     : 40px;
        padding    : 0 12px;
        cursor     : pointer;
        transition : all 0.3s;

        >span {
            vertical-align: middle;
        }

        &:hover {
            background: @pro-header-hover-bg;
        }

        &:global(.opened) {
            background: @pro-header-hover-bg;
        }
    }

    .search {
        padding: 0 12px;

        &:hover {
            background: transparent;
        }
    }

    .account {
        .avatar {
            margin-right  : 8px;
            color         : @primary-color;
            vertical-align: top;
            background    : rgba(255, 255, 255, 0.85);
        }
    }
}

.dark {
    .action {
        &:hover {
            background: #252a3d;
        }

        &:global(.opened) {
            background: #252a3d;
        }
    }
}

@media only screen and (max-width: @screen-md) {
    :global(.ant-divider-vertical) {
        vertical-align: unset;
    }

    .name {
        display: none;
    }

    .right {
        // position: absolute;
        // top     : 0;
        // right   : 12px;

        .account {
            .avatar {
                margin-right: 0;
            }
        }

        .search {
            display: none;
        }
    }
}